<template>
  <div id="main" class="col-12"></div>
</template>



<script>
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
// import "echarts-wordcloud/dist/echarts-wordcloud.min";

export default {
  data() {
    return {
      symbolUrl: [
        "",
      ],
      data: [
        {
          name: "Sam S Club",
          value: 10000,
          textStyle: {
            color: "black",
          },
          emphasis: {
            textStyle: {
              color: "red",
            },
          },
        },
        {
          name: "Macys",
          value: 6181,
        },
        {
          name: "Amy Schumer",
          value: 4386,
        },
        {
          name: "Jurassic World",
          value: 4055,
        },
        {
          name: "Charter Communications",
          value: 2467,
        },
        {
          name: "Chick Fil A",
          value: 2244,
        },
        {
          name: "Planet Fitness",
          value: 1898,
        },
        {
          name: "Pitch Perfect",
          value: 1484,
        },
        {
          name: "Express",
          value: 1112,
        },
        {
          name: "Home",
          value: 965,
        },
        {
          name: "Johnny Depp",
          value: 847,
        },
        {
          name: "Lena Dunham",
          value: 582,
        },
        {
          name: "Lewis Hamilton",
          value: 555,
        },
        {
          name: "KXAN",
          value: 550,
        },
        {
          name: "Mary Ellen Mark",
          value: 462,
        },
        {
          name: "Farrah Abraham",
          value: 366,
        },
        {
          name: "Rita Ora",
          value: 360,
        },
        {
          name: "Serena Williams",
          value: 282,
        },
        {
          name: "NCAA baseball tournament",
          value: 273,
        },
        {
          name: "Point Break",
          value: 265,
        },
      ],
    };
  },
  mounted() {
    this.Echarts();
  },
  methods: {
    Echarts() {
      var myChart = echarts.init(document.getElementById("main"));
      var maskImage = new Image();
      maskImage.onload = function () {
        myChart.setOption({
          tooltip: {
            show: true,
          },
          grid: {
            left: 0,
            bottom: 0,
            top: 0,
            right: 0,
          },
          xAxis: {
            type: "category",
            show: false,
          },
          yAxis: {
            max: 100,
            show: false,
          },
          series: [
            {
              zlevel: 10,
              type: "pictorialBar",
              name: "pictorial",
              silent: true,
              symbol: "image://" + this.symbolUrl,
              // 修改边框的宽度和高度
              symbolSize: ["100%", "100%"],
              symbolPosition: "center",
              barWidth: "100%",
              barMaxWidth: "100%",
              itemStyle: {
                normal: {
                  // 背景图透明度
                  opacity: 0.1,
                },
              },
              data: [
                {
                  value: 100,
                },
              ],
            },
            {
              type: "wordCloud",
              sizeRange: [8, 60],
              rotationRange: [-30, 30],
              maskImage: maskImage,
              textPadding: 0,
              // 文字间距
              gridSize: 20,
              //与上方图片宽高相对应
              width: "100%",
              height: "100%",
              left: "center",
              top: "center",
              drawOutOfBound: false,
              textStyle: {
                normal: {
                  color: function () {
                    return (
                      "rgb(" +
                      [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                      ].join(",") +
                      ")"
                    );
                  },
                },
              },
              data: this.data,
            },
          ],
        });
      };

      maskImage.src = this.symbolUrl;
    },
  },
};
</script>

<style>
#main {
  z-index: 100;
  width: 100%;
  height: 300px !important;
  margin: 0;
}
</style>


